<template>
    <!-- 随机生成验证码 -->
    <div class="right_auth">
       <div id="v_container" @click="btncode"></div>
    </div>
</template>
 
 
<script>
import { GVerify } from "@/utils/GVerify/GVerify";
export default {
  data() {
    return {
      index2: 0, // 验证码 提示
      verifyCode: "",
      imgData: "", //验证码
      }
  },
  props: ['showverifity',//接受父组件传递过来的信息 当>=3 的时候 显示验证码
  ]
  ,
  mounted() {
    // console.log('默认--触发了获取验证码')
    this.verifyCode = new GVerify("v_container");
    this.imgData = this.verifyCode.options.code;
    this.changeinput() //调用传递方法
  },
  
  methods: {
    btncode() {
        
        // console.log('手动--触发了获取验证码')
      this.imgData = this.verifyCode.options.code.substring(
        this.verifyCode.options.code.length - 4
        
      );
      // console.log(this.verifyCode)
      // // 打印获取验证码数值
      // console.log(this.imgData)
    this.changeinput() //调用传递方法
      
    },
     // 将验证码发送出去 子组件像父组件传输
     changeinput() {
      // console.log(document.getElementById('inputverifity').value)
      // 向父组件 发送验证码数值
      this.$emit("inputChanged", this.imgData); //自定义事件  传递值“子向父组件传值”

    },
  },
  watch: {
    // 添加这行代码来取消eslint
    // eslint-disable-next-line no-unused-vars  
    showverifity(newVal, oldVal) {
      //newVal 是新值，oldVal 是旧值
      // console.log(newVal)
      document.getElementById('verifyCanvas').remove() //删除先前验证码
      this.verifyCode = new GVerify("v_container");
    this.imgData = this.verifyCode.options.code;
    this.changeinput() //调用传递方法
      // if (newVal >= 3) {
      //   axios
      //     .request({
      //       url: "http://localhost:8080/usersLogin/getCode",
      //       responseType: "blob",
      //       method: "post",
      //       params: {},
      //     })
      //     .then((res) => {
      //       // showverifity = 1;// 将验证码显示标志 更改
      //       let blob = new Blob([res.data], { type: "image/png" });
      //       let url = window.URL.createObjectURL(blob);
      //       //   console.log(url);
      //       let one = document.getElementById("num");
      //       one.style.display = "inline-block"
      //       one.style.marginBottom = "20px"
      //       one.src = url;
      //       //   console.log(one);
      //       this.imgSrc = url;
      //     }),
      //     (error) => {
      //       this.$message({
      //         type: "warning",
      //         message: "系统错误，请联系管理员!",
      //       });
      //       console.log(error)
      //     };
      // }
    }
  }
}
</script>